<template>
	<view v-if="isLoaded" class="container">
		<li-report height="600" :param.sync="param" :radios.sync="radios" :reportData="tableData" :columns="columns" v-on:changeType="changeType($event)">
			<li-summary-cards
				:summaryData="[
					{
						title: `菜品收入(元)`,
						value: summaryObj.realAmount
					},
					{
						title: `菜品销售额(元)`,
						value: summaryObj.allAmount
					},
					{
						title: `菜品销售数量`,
						value: summaryObj.quantity
					},
					{
						title: `菜品优惠金额(元)`,
						value: summaryObj.discountAmount
					}
				]"
			/>
		</li-report>
	</view>
</template>

<script>
import LiReportMixin from '../../../mixins/liReportMixin.js';
import date from '@/utils/date';
export default {
	mixins: [LiReportMixin],
	data() {
		return {
			reportFn: 'GetPageReport',
			param: {
				dataTimeRange: [date.getToday(), date.getToday()],
				pageNum: 1,
				pageSize: 99999,
				reportId: 105,
				appointType: 1
			},
			radios: [
				{ name: '菜品名称', value: 1, selected: true },
				{ name: '菜品规格', value: 2 },
				{ name: '菜品分类', value: 3 }
			],
			columns: [
				{
					name: 'foodName',
					label: '菜品名称',
					fixed: true
				},
				{
					name: 'quantity',
					label: '销售数量',
					fixed: false
				},
				{
					name: 'quantityRate',
					label: '销售数量占比',
					fixed: false
				},
				{
					name: 'allAmount',
					label: '销售额',
					fixed: false
				},
				{
					name: 'allAmountRate',
					label: '销售额占比',
					fixed: false
				},
				{
					name: 'realAmount',
					label: '菜品收入',
					fixed: false
				},
				{
					name: 'realAmountRate',
					label: '菜品收入占比',
					fixed: false
				},
				{
					name: 'discountAmount',
					label: '菜品优惠',
					fixed: false
				},
				{
					name: 'discountAmountRate',
					label: '菜品优惠占比',
					fixed: false
				},
				{
					name: 'feedAmount',
					label: '加料加价',
					fixed: false
				},
				{
					name: 'taskAmount',
					label: '做法加价',
					fixed: false
				}
			]
		};
	},

	methods: {
		changeType() {
			if (this.param.appointType === 2) {
				this.columns = [
					{ name: 'foodName', label: '菜品名称', fixed: true },
					{ name: 'specName', label: '菜品规格', fixed: false },
					{ name: 'quantity', label: '销售数量', fixed: false },
					{ name: 'quantityRate', label: '销售数量占比', fixed: false },
					{ name: 'allAmount', label: '销售额', fixed: false },
					{ name: 'allAmountRate', label: '销售额占比', fixed: false },
					{ name: 'realAmount', label: '菜品收入', fixed: false },
					{ name: 'realAmountRate', label: '菜品收入占比', fixed: false },
					{ name: 'discountAmount', label: '菜品优惠', fixed: false },
					{ name: 'discountAmountRate', label: '菜品优惠占比', fixed: false },
					{ name: 'feedAmount', label: '加料加价', fixed: false },
					{ name: 'taskAmount', label: '做法加价', fixed: false }
				];
			} else if (this.param.appointType === 3) {
				this.columns = [
					{ name: 'foodCategoryName', label: '菜品分类名称', fixed: true },
					{ name: 'quantity', label: '销售数量', fixed: false },
					{ name: 'quantityRate', label: '销售数量占比', fixed: false },
					{ name: 'allAmount', label: '销售额', fixed: false },
					{ name: 'allAmountRate', label: '销售额占比', fixed: false },
					{ name: 'realAmount', label: '菜品收入', fixed: false },
					{ name: 'realAmountRate', label: '菜品收入占比', fixed: false },
					{ name: 'discountAmount', label: '菜品优惠', fixed: false },
					{ name: 'discountAmountRate', label: '菜品优惠占比', fixed: false },
					{ name: 'feedAmount', label: '加料加价', fixed: false },
					{ name: 'taskAmount', label: '做法加价', fixed: false }
				];
			} else if (this.param.appointType === 1) {
				this.columns = this.$options.data().columns;
			}
		}
	}
};
</script>

<style scoped lang="scss">
container {
	padding: 20rpx;
}
</style>
